<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="真实姓名">
      <el-input v-model="form.name" placeholder="请输入真实姓名"/>
    </el-form-item>
    <el-form-item label="选择爱好">
      <el-select v-model="form.region" placeholder="请选择类型">
        <el-option label="篮球" value="shanghai"/>
        <el-option label="唱歌" value="beijing"/>
      </el-select>
    </el-form-item>
    <el-form-item label="出生日期">
      <el-col :span="11">
        <el-date-picker v-model="form.date1" type="date" placeholder="请选择出生日期" style="width: 100%"/>
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker v-model="form.date2" placeholder="请选择时间" style="width: 100%"/>
      </el-col>
    </el-form-item>
    <el-form-item label="偏好设置">
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="篮球" name="type"/>
        <el-checkbox label="唱歌" name="type"/>
        <el-checkbox label="跳舞" name="type"/>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="选择性别">
      <el-radio-group v-model="form.resource">
        <el-radio label="男"/>
        <el-radio label="女"/>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="上传头像">
      <el-upload class="avatar-uploader">
        <el-icon class="avatar-uploader-icon">
          <Plus/>
        </el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item label="个性签名">
      <el-input v-model="form.desc" type="textarea"/>
    </el-form-item>
    <el-form-item label="同意许可">
      <el-switch v-model="form.delivery"/>
    </el-form-item>
    <el-form-item label="应用评分">
      <el-rate/>
    </el-form-item>
    <el-form-item label="大小设置">
      <el-slider show-input/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {reactive} from 'vue'

export default {
  data() {
    return {
      form: reactive({
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      })
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>